import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:vape_xe/routes/app_pages.dart';
import 'package:vape_xe/services/services.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class ProfileView extends GetView<ProfileController> {
  const ProfileView({super.key});

  /// 进度条
  Widget _buildProgress() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Row(
            children: [
              Text(
                controller.profileData['levelData']?['nowLevelExp']?.toString().removeZero() ?? '',
                style: TextStyle(fontSize: 12.sp),
              ),
              const Spacer(),
              Text(
                controller.profileData['levelData']?['nextLevelExp']?.toString().removeZero() ?? '',
                style: TextStyle(
                    fontSize: 12.sp,
                    color: (controller.profileData['levelData']?['isMax'] ?? 0) == 1 ? Colors.white : Colors.white30),
              ),
            ],
          ),
        ),
        8.hGap,
        Stack(
          children: [
            Positioned(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Container(
                  height: 16.h,
                  decoration: BoxDecoration(
                    borderRadius: 100.radius,
                    color: Colors.white10,
                  ),
                ),
              ),
            ),
            Positioned(
              top: 4.h,
              left: 4.w,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Container(
                  height: 8.h,
                  width: controller.progressValue / 100 * 358.w, //最长358
                  decoration: BoxDecoration(
                    borderRadius: 100.radius,
                    color: const Color(0xffF5B946),
                    boxShadow: const [
                      BoxShadow(
                        color: Color(0xffF5B946),
                        blurRadius: 8,
                        offset: Offset(0, 1),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
                left: max(0.w, controller.progressValue / 100 * 358.w - 8.w) + 16.w,
                child: Container(
                  width: 16.h,
                  height: 16.h,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffF5B946),
                    boxShadow: [
                      BoxShadow(
                        color: Color(0xffF5B946),
                        blurRadius: 8,
                        offset: Offset(0, 2),
                      )
                    ],
                  ),
                  child: Image.asset('assets/images/ic_jindu_cir.webp'),
                )),
          ],
        ),
        8.hGap,
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ...List.generate(10, (index) {
                return Opacity(
                  opacity: index < controller.progressValue / 10 ? 1 : 0.3,
                  child: Container(
                    width: 2.w,
                    height: 2.w,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Color(0xffD9D9D9),
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
        8.hGap,
        Container(
          width: 40.w,
          height: 45.h,
          margin: EdgeInsets.only(left: max(0, controller.progressValue / 100 * 358.w - 4.w)),
          padding: EdgeInsets.only(bottom: 11.h),
          alignment: Alignment.bottomCenter,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/ic_zhizhen.webp'), // 确保你的图片放在assets文件夹下
              fit: BoxFit.cover, // 图片填充方式，这里选择覆盖整个Container
            ),
          ),
          child: Text(
            double.parse(controller.profileData['levelData']?['experience']?.toString() ?? '0').getIntegerString(),
            style: TextStyle(fontSize: 11.sp, fontWeight: FontWeight.bold),
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new_rounded),
          onPressed: () => {Navigator.of(context).pop('刷新')},
        ),
        title: Text("Profile".tr),
      ),
      body: Obx(
        () => controller.showProgress
            ? const Center(child: CircularProgressIndicator())
            : Column(
                children: [
                  /// 头部
                  Container(
                    margin: EdgeInsets.only(left: 16.w, top: 20.h, right: 16.w),
                    decoration: BoxDecoration(
                      color: Colors.white10,
                      borderRadius: 12.radius,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.only(left: 16.w, top: 20.h, right: 16.w),
                          child: Row(
                            children: [
                              Hero(
                                tag: 'hero_avatar',
                                child: netImageCached(
                                  controller.profileData['avatar'] ?? '',
                                  width: 56.w,
                                  height: 56.w,
                                  radius: 100.w,
                                  fit: BoxFit.cover,
                                  showProgress: false,
                                ),
                              ),
                              12.vGap,
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        Hero(
                                          tag: 'hero_nickname',
                                          child: Text(
                                            controller.profileData['nickName'] ?? '',
                                            style: TextStyle(
                                              fontSize: 20.sp,
                                              fontFamily: 'Montserrat',
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ),
                                        const Spacer(),
                                        GestureDetector(
                                          onTap: () => Get.toNamed(Routes.ACCOUNTINFO),
                                          child: Image.asset('assets/images/ic_set.webp', width: 22.w, height: 22.w),
                                        ),
                                        10.vGap,
                                      ],
                                    ),
                                    7.hGap,
                                    Text(
                                      "LV.${controller.profileData['level']}",
                                      style: TextStyle(
                                        fontSize: 14.sp,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold,
                                        foreground: Paint()
                                          ..shader = const LinearGradient(
                                            colors: <Color>[Color(0xffF5B946), Color(0xffF58546)],
                                          ).createShader(
                                            const Rect.fromLTWH(0.0, 0.0, 150.0, 0.0),
                                          ),
                                        shadows: [
                                          Shadow(
                                            offset: const Offset(0, 1.2),
                                            blurRadius: 15,
                                            color: const Color(0xffF5B946).withOpacity(0.5),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                          child: Text(
                            'Upgrading can increase the invitee draw percentage.'.tr,
                            style: TextStyle(fontSize: 13.sp, color: Colors.white30),
                          ),
                        ),
                        24.hGap,
                        _buildProgress(),
                        20.hGap,
                      ],
                    ),
                  ),

                  /// 能量值和总收入
                  Container(
                    margin: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                    padding: EdgeInsets.symmetric(vertical: 24.h),
                    decoration: BoxDecoration(
                      color: Colors.white10,
                      borderRadius: 12.radius,
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Column(
                          children: [
                            Text(
                              controller.profileData['coin'].toString().removeZero(),
                              style: TextStyle(fontSize: 20.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                            ),
                            Text(
                              'Energy'.tr,
                              style: TextStyle(fontSize: 12.sp, color: Colors.white30),
                            ),
                          ],
                        ),
                        Column(
                          children: [
                            Text(
                              controller.profileData['moneyTotal'].toString().removeZero(),
                              style: TextStyle(fontSize: 20.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                            ),
                            Text(
                              '${'Total amount'.tr}(${ConfigStore.to.currency})',
                              style: TextStyle(fontSize: 12.sp, color: Colors.white30),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),

                  /// 团队人员
                  GestureDetector(
                    onTap: () => Get.toNamed(Routes.TEAM),
                    child: Container(
                      height: 52.h,
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      margin: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                      decoration: BoxDecoration(
                        color: Colors.white10,
                        borderRadius: 12.radius,
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text(
                            'My team members'.tr,
                            style: TextStyle(fontSize: 14.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                          ),
                          const Spacer(),
                          Image.asset('assets/images/ic_arrow_right_white.webp', width: 10.w, height: 10.w),
                        ],
                      ),
                    ),
                  ),

                  /// 提现列表
                  GestureDetector(
                    onTap: () => Get.toNamed(Routes.WITHDRAWLIST),
                    child: Container(
                      height: 52.h,
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      margin: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                      decoration: BoxDecoration(
                        color: Colors.white10,
                        borderRadius: 12.radius,
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text(
                            'Withdraw details'.tr,
                            style: TextStyle(fontSize: 14.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                          ),
                          const Spacer(),
                          Image.asset('assets/images/ic_arrow_right_white.webp', width: 10.w, height: 10.w),
                        ],
                      ),
                    ),
                  ),

                  /// 隐私政策
                  GestureDetector(
                    onTap: () => Get.toNamed(
                      Routes.WEB_VIEW,
                      arguments: {'url': ConfigStore.to.webUrls['Privacy policy']},
                    ),
                    child: Container(
                      height: 52.h,
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      margin: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                      decoration: BoxDecoration(
                        color: Colors.white10,
                        borderRadius: 12.radius,
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Text(
                            'Privacy policy'.tr,
                            style: TextStyle(fontSize: 14.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                          ),
                          const Spacer(),
                          Image.asset('assets/images/ic_arrow_right_white.webp', width: 10.w, height: 10.w),
                        ],
                      ),
                    ),
                  ),

                  /// 退出登录
                  GestureDetector(
                    onTap: () => controller.logout(),
                    child: Container(
                      height: 52.h,
                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                      margin: EdgeInsets.only(left: 16.w, top: 12.h, right: 16.w),
                      decoration: BoxDecoration(
                        color: Colors.white10,
                        borderRadius: 12.radius,
                      ),
                      child: Center(
                        child: Text(
                          'Log out'.tr,
                          style: TextStyle(fontSize: 14.sp, fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
      ),
    );
  }
}
